<template>
	<view>
		<!-- 显示水印照片 -->
		<view class="waterphoto" :style="{ width: windowWidth,height:windowHeight}">
			<!-- :style="{ 'height': h + 'px','width': w +'px'}" -->
			<image v-if="imgSrc" :style="{ 'width': width +'px','height': height + 'px'}" :src="imgSrc"></image>
			<text v-if="!imgSrc" style="margin-top: 100upx;">稍等片刻...</text>
			<view class="downphoto" :style="{ width: width +'px',height:220}">
				<!-- 返回按钮 -->
				<view class="back" @click="backTakePhoto">
					<image style="width: 60upx;height:60upx;margin-bottom: 10upx;" src="../../static/back.png"></image>
					<text style="color: black;font-size: 24upx;text-align: center;">返回</text>
				</view>
				<!-- 保持按钮 -->
				<view class="down" @click="downWaterPhoto">
					<image style="width: 60upx;height:60upx;margin-bottom: 10upx;" src="../../static/down.png"></image>
					<text style="color: black;font-size: 24upx;text-align: center;">保存</text>
				</view>
			</view>
		</view>
		<!-- 画水印 -->
		<!-- canvas元素，利用它的功能，实现添加水印style="position: absolute;top: -999999px;" -->
		<view style="position: absolute;top: -999999px;">
			<view>
				<canvas :style="{ 'width': width +'px','height': height + 'px'}" type="2d"
					canvas-id="firstCanvas"></canvas>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgSrc: '', //图片路径
				photoInfo: '', //图片信息
				windowWidth: 0, //屏幕宽度
				windowHeight: 0, //屏幕高度
				width: '', //图片宽度
				height: '', //图片高度
				waternum: '', //水印模板序号
				addRess: '', //地址
				nowTime: '', //时间
				nowTimes: '',
			}
		},
		onLoad() {
			var _this = this
			uni.getSystemInfo({
				success: function(res) {
					_this.windowWidth = res.windowWidth;
					_this.windowHeight = res.windowHeight;

				}
			});

		},
		onReady() {
			//获取照片信息
			this.photoInfo = uni.getStorageSync('photoInfo');
			//原图图片路径
			//this.imgSrc = this.photoInfo.tempImagePath
			// this.width = uni.upx2px(this.photoInfo.width / 2) + 'px' //upx转换为px
			// this.height = uni.upx2px(this.photoInfo.height / 2) + 'px'
			this.width = uni.upx2px(this.photoInfo.width / 2) //upx转换为px
			this.height = uni.upx2px(this.photoInfo.height / 2)

			//获取水印模板序号
			this.waternum = uni.getStorageSync('waterNum');
			//获取地址
			this.addRess = uni.getStorageSync('addRess');
			// 获取当前日期时间
			this.getTime();

			setTimeout(() => {
				this.drawWater(this.photoInfo.tempImagePath)
			}, 1000);




		},
		methods: {
			backTakePhoto() { //返回上一页
				uni.reLaunch({
					url: '../watermarking-camera/watermarking-camera'
				})
			},
			// 获取当天是周几
			getWeekday() {
				const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
				const d = new Date();
				const weekday = weekdays[d.getDay()];
				return weekday;
			},
			getTime: function() { //获取当前时间
				var date = new Date(),
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day;
				var timers = hour + ':' + minute + ':' + second;

				// 调用方法获取当天是周几
				const todayWeekday = this.getWeekday();
				//console.log('今天是周' + todayWeekday);
				this.nowTimes = timers

				this.nowTime = timer + ' ' + '星期' + todayWeekday;
			},
			drawWater(imginfo) {//添加水印
				var that = this
				// 获取图片信息
				uni.getImageInfo({
					src: imginfo,
					success: ress => {

						let ctx = uni.createCanvasContext('firstCanvas'); /** 创建画布 */
						//将图片绘制到cancas内
						ctx.drawImage(imginfo, 0, 0, that.width, that.height);

						ctx.setFontSize(20); // 设置字体大小为 10px
						ctx.setFillStyle('#FFFFFF'); // 设置颜色为白色#FFFFFF


						//绘制的模板1
						if (that.waternum == 1) {
							// 绘制日期和时间
							let textToHeight = (that.height / 3) * 2 + 30 //图片高度的三分之二

							ctx.setFontSize(30); // 
							ctx.fillText(that.nowTimes, 10, textToHeight); //时间

							let textToHeight1 = (that.height / 3) * 2 + 60
							ctx.setFontSize(14);
							ctx.fillText(that.nowTime, 15, textToHeight1); //日期 

							let textToHeight2 = (that.height / 3) * 2 + 90
							ctx.setFontSize(14);
							ctx.fillText(that.addRess, 15, textToHeight2); //地址
						}


						// 绘制完成后，在下一个事件循环将 canvas 内容导出为临时图片地址
						ctx.draw(false, () => {
							setTimeout(() => {
								uni.canvasToTempFilePath({
									canvasId: 'firstCanvas',
									success: res1 => {
										that.imgSrc = res1.tempFilePath
										console.log('成功了')
										// 预览图片
										uni.previewImage({
											current: res1.tempFilePath,
											urls: [res1.tempFilePath]
										});
									},
									fail: (err) => {
										console.log('导出图片失败', err)
									}
								});
							}, 1000);
						});
					}
				});



			},
			downWaterPhoto() { //保存到相册
				var that = this
				uni.saveImageToPhotosAlbum({
					filePath: that.imgSrc,
					success: function() {
						uni.showToast({
							title: "保存成功",
							icon: "none"
						});
					},
					fail: function(err) {
						uni.showToast({
							title: "保存失败，请稍后重试",
							icon: "none"
						});
						console.log(err)
					},
				})
			},

		}
	}
</script>

<style>
	/* 显示水印照片 */
	.waterphoto {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		background-color: #ffffff;
	}

	.waterphoto>image {
		margin-top: 100upx;
	}

	.waterphoto>.downphoto {
		height: 440upx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/* 返回按钮 */
	.waterphoto>.downphoto>.back {
		width: 120upx;
		height: 120upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 保存按钮 */
	.waterphoto>.downphoto>.down {
		width: 120upx;
		height: 120upx;
		display: flex;
		flex-direction: column;
		align-items: center;

	}
</style>